<template>
	<view class="container">
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-input :custom-style="customStyle" v-model="form.account" placeholder="账号/手机号/邮箱"
					placeholder-style="color:#d8d8d8" />
				<u-line></u-line>
				<u-input :custom-style="customStyle" v-model="form.password" type="password" placeholder="密码"
					placeholder-style="color:#d8d8d8" maxlength="12" />
				<u-line></u-line>
			</u-form>
			<u-button class="custom-style" type="primary" :disabled="!form.password || !form.account" @click="doLogin">
				登录
			</u-button>
		</view>
		<view class="footer-text">
			<view @click="forget">忘记密码</view>
			<view @click="register">新用户注册</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { useStore } from 'vuex';
	import http from '../../utils/http.js'; // 使用封装的 HTTP 请求工具
	import { api } from '../../api/api.js';

	// 响应式数据
	const form = reactive({
		account: 'admin',
		password: '123456'
	});
	const customStyle = reactive({
		color: 'white'
	});

	// 组件引用
	const uForm = ref(null);
	const uToast = ref(null);

	// Vuex store
	const store = useStore();

	// 登录方法
	const doLogin = async () => {
		try {
			const response = await http.post(api.login, {
				account: form.account,
				password: form.password
			});

console.log(response);
			if (response.code === 200 && response.httpCode === 200) {
				const userInfo = response.data.info;
				const token = response.data.accessToken;

				// 保存到本地存储
				store.commit('updateUserAndToken', {
					userInfo,
					token
				});

				// 跳转首页
				uni.reLaunch({
					url: '/pages/home/home'
				});
			} else {
				uToast.value.show({
					title: response.message || '登录失败',
					position: 'bottom'
				});
			}
		} catch (error) {
			console.error('登录失败:', error);
			uni.showToast({
				title: '网络错误，请稍后再试',
				position: 'bottom'
			});
		}
	};

	// 注册方法
	const register = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		});
	};

	// 忘记密码方法
	const forget = () => {
		uToast.value.show({
			title: '这边建议重新注册☺️',
			position: 'bottom'
		});
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		padding-top: 600rpx;
		overflow: hidden;
		background-image: url('/static/image/kobe.jpg');
		background-size: cover;
		background-position: center;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 1;
		}
	}

	.content {
		z-index: 2;
		width: 600rpx;
	}

	.footer-text {
		z-index: 3;
		width: 600rpx;
		height: 40rpx;
		font-size: 16px;
		color: #2979ff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.custom-style {
		background-color: rgb(37, 171, 224);
		width: 100%;
		margin-top: 20rpx;
	}
</style>